<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="type=true;AddStaff = true;form.id = '';getOptions();">
                    用户新增
                </el-button>

            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    v-loading="loading"
                    header-cell-class-name="table-header">
                <el-table-column prop="id" label="序号" align="center"></el-table-column>
                <el-table-column prop="nick_name" label="用户名" align="center"></el-table-column>
                <el-table-column prop="group_name" label="所属角色" align="center"></el-table-column>
                <el-table-column prop="username" label="登录账号" align="center"></el-table-column>
                <el-table-column prop="mobile" label="联系方式" align="center"></el-table-column>
                <el-table-column prop="add_time" label="创建时间" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                                   @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                :title="type?'新增员工配置':'修改员工配置'"
                :visible.sync="AddStaff"
                width="50%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="员工名称">
                    <el-input v-model="form.nick_name"></el-input>
                </el-form-item>
                <el-form-item label="所属角色">
                    <el-select v-model="form.group_id" placeholder="请选择">
                        <template v-for="item in options">
                            <el-option :label="item.name" :value="item.id"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" @click="onSubmit">{{ type ? '立即创建' : '立即修改' }}</el-button>
                    <el-button @click="cancellation">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'

export default {
    name: 'basetable',
    data() {
        return {
            type: false,
            AddStaff: false,
            loading: false,
            options: [],
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            form: {
                id: '',
                group_id: '',
                nick_name: '',
                password: '',
                username: '',
                mobile: '',
            },
            tableData: [],
        };
    },
    created() {
        this.getData();

    },
    methods: {
        // 获取 easy-mock 的模拟数据
        async getOptions() {
            let info = await AxiosPost('/admin/user_group/groupauthlistall')
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.options = info.data
        },
        async getData() {
            this.loading = true
            let info = await AxiosPost('/admin/user_group/userlist')
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.loading = false
            info.data.forEach(item => {
                item.add_time = this.$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')
            })
            this.tableData = info.data
        },
        handleEdit(index, item) {
            this.type = false;
            this.form.id = item.id
            this.form.nick_name = item.nick_name
            this.form.password = ''
            this.form.group_id = parseInt(item.group_id)
            this.form.username = item.username
            this.form.mobile = item.mobile
            this.getOptions();
            this.AddStaff = true
        },
        async onSubmit() {
            let info;
            if (!this.form.nick_name) {
                this.$message.error("请输入用户名");
                return false;
            }
            if (!this.form.group_id) {
                this.$message.error("请选择所属角色");
                return false;
            }
            if (!this.form.mobile) {
                this.$message.error("请输入员工联系方式");
                return false;
            }
            if (!this.form.username) {
                this.$message.error("请选择员工登录账号");
                return false;
            }
            if (this.type) {
                info = await AxiosPost('/admin/user_group/register', {
                    nick_name: this.form.nick_name,
                    password: this.form.password,
                    group_id: this.form.group_id,
                    mobile: this.form.mobile,
                    username: this.form.username
                })
                if (info.code !== 10000) {
                    this.$message.error(info.message)
                    return false
                }
                this.$message.success(info.message)
                this.AddStaff = false
                this.getData();
            } else {
                info = await AxiosPost('/admin/user_group/userupdate', {
                    id: this.form.id,
                    nick_name: this.form.nick_name,
                    password: this.form.password,
                    group_id: this.form.group_id,
                    mobile: this.form.mobile,
                    username: this.form.username
                })
                if (info.code !== 10000) {
                    this.$message.error(info.message)
                    return false
                }
                this.$message.success(info.message)
                this.AddStaff = false
                this.getData();
            }
        },
        cancellation() {
            this.form.id = ''
            this.form.nick_name = ''
            this.form.password = ''
            this.form.group_id = ''
            this.form.username = ''
            this.form.mobile = ''
            this.AddStaff = false
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(async () => {
                    let info = await AxiosPost('/admin/user_group/delemployees', {id: row.id})
                    if (info.code !== 10000) {
                        this.$message.error(info.message)
                        return false
                    }
                    this.$message.success(info.message)
                    this.getData();
                })
                .catch(() => {
                });
        },
    }
};
//时间戳转换
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
